/*
 javascript:简称JS，是一门运行在客户端浏览器
 的脚本语言，js是一门弱类型语言（任何变量使用
 前无需声明数据类型，并且在运行期间可以任意修改
 其数据类型）；JS是一门直译型语言（无需编译，直接
 在运行期间由js解析器直接解释）

 Javascript由三大核心模块构成：
 1. ECMAScript基础语法
 2. DOM（文档对象模型）
 3. BOM（浏览器对象模型）

 java（强类型）-服务端语言:
 int i = 10
 boolean b = false;
 User user = new User();

 i = "helloworld"; //报错

 js（弱类型）-客户端语言：
 var i = 10;
 var b = false;
 var user = new User();

 i = "helloworld"; //正常
 
 console.log('hello js')

 JSON：JavaScript Object Notation，是一种通用的数据交换
 格式
 */


//创建音频播放器对象
const player = document.createElement('audio');
//声明服务器的根地址
var baseURL = 'http://www.softeem.top:8080/music/';
//声明一个空数组，用于存储所有从服务端获取的歌曲数据
var musics = [];
//标记当前正在播放的歌曲索引
var nowIndex = 0;
//声明歌曲当前播放进度以及总进度(单位：秒)
var now = 0;
var duration = 0;
//标记歌曲的播放状态(播放和暂停)
var isplay = false;
//声明播放方式，循环播放
var loopType = 0;

//自调用函数
(function(){
    //1.请求服务端,获取歌曲信息(AJAX，websocket)
    //创建一个XMLHttpRequest对象（js中用于实现前后端交互对象）
    var xhr = new XMLHttpRequest();
    //打开一个请求（请求方式，请求地址，是否异步请求）
    xhr.open('GET',baseURL+'list',true);
    //发送请求
    xhr.send(null);
    //当请求状态发生变化时执行回调函数
    xhr.onreadystatechange=function(){
        //当准备状态完成，以及响应完成时接受服务端数据
        if(xhr.readyState === 4 && xhr.status === 200){
            //接收服务响应的数据(JSON格式)
            var json = xhr.responseText;
            //将json字符串解析为JS对象
            musics = JSON.parse(json);
            //将歌曲信息在页面中渲染
            render();
        }
    }

    //用于进行数据渲染（把服务器返回的数据在页面中以歌曲列表项的形式显示）
    function render(){
        //声明局部变量用于将生成的html代码临时存储
        var html = '';
        for(var i = 0;i<musics.length;i++){
            // 获取一首歌曲对象 
            var m = musics[i];
            //每次循环创建一段列表项的结构代码并组合
            html += `<div class="item row" data-index="${i}">
                        <div class="item-icon">
                            <i class="fa fa-music fa-1x"></i>
                        </div>
                        <div class="item-name">${m.name}</div>
                        <div class="item-size">${(m.size/(1024*1024)).toFixed(1)}MB</div>
                    </div>`;
        }
        // 1MB = 1024kb 1kb=1024字节
        //将生成的html插入到指定的标签中
        document.querySelector('section').innerHTML = html;
    }
    
    //2.为所有歌曲列表项绑定点击事件

    var items = document.querySelector('section').addEventListener('click',function(e){
        //切换歌曲强还原上一首歌曲列表项样式
        document.querySelectorAll('.item')[nowIndex].className = 'item row';
        //获取被点击的父元素
        var p = e.target.parentElement;
        //获取元素上的data-index属性值
        nowIndex = p.dataset.index;
        if (nowIndex) {
            //获取需要被播放的歌曲项
            var m = musics[nowIndex];
            //获取歌曲的播放路径
            var url = baseURL + m.path;
            //设置播放器的播放源
            player.src = url;
            //播放
            startPlay();
        }
        
    });

    function startPlay(){
        //启动定时任务监控播放器的状态变化
        var flag = setInterval(function() {
            //获取播放器的准备状态(0 - 4五种取值)
            var i = player.readyState;
            if(i == 4){
                //标记状态为正在播放
                isplay = true;
                player.play();
                //清除定时器
                clearInterval(flag);
            }
        },50)
        //将正在播放的歌曲名称显示在头部区域
        var m = musics[nowIndex]
        document.getElementById('music-name').innerText = m.name;
        //将控制按钮显示为暂停
        document.querySelector('.btn-play-pause').innerHTML='<i class="fa fa-pause-circle-o fa-4x"></i>';
        //标记被选中列表项的样式高亮
        document.querySelectorAll('.item')[nowIndex].className = 'item row active';
    }
    
    //3.根据歌曲的播放状态实时更新进度与时间
    //为播放器对象绑定数据加载完成事件(显示初始进度与时间)
    player.addEventListener('loadeddata',function() {
        //获取歌曲的播放总进度(秒)
        duration = this.duration;
        //将时间在指定位置显示
        document.querySelector('.time-now').innerText = fmtTime(now);
        document.querySelector('.time-duration').innerText = fmtTime(duration);

    })

    //用于时间格式化的函数，将以秒为单位的时间格式化为mm:ss
    function fmtTime(time) {
        time = new Date(time * 1000);
        var m = time.getMinutes();
        var s = time.getSeconds();
        m = m < 10 ? '0' + m : m;
        s = s < 10 ? '0' + s : s;
        return m + ':' + s;
    }
    
    //实时更新进度条
    player.addEventListener('timeupdate',function() {
        //获取当前的歌曲播放进度(秒)
        now = this.currentTime;
        //更新歌曲的当前播放时间
        document.querySelector('.time-now').innerText = fmtTime(now);
        //计算当前的播放进度
        var progress = now / duration * 100 + '%';
        //改变进度条宽度
        document.querySelector('.progress').style.width = progress;
    })

    //4.实现歌曲进度的改变
    document.querySelector('.progress-box').addEventListener('click',function(e) {
        //获取点击的坐标x轴到左边缘的距离
        var x = e.offsetX;
        //获取屏幕的总宽度减去左右留白
        var w = window.innerWidth - 40;
        //计算并获取歌曲的播放目标位置
        now = x / w * duration;
        //将播放器的播放位置跳转到目标位置
        player.currentTime = now;
    })


    //5.控制歌曲的播放和暂停
    //为播放和暂停按钮绑定事件，控制歌曲的播放与暂停
    document.querySelector('.btn-play-pause').addEventListener('click',function(e) {
        if(isplay){
            //暂停
            player.pause();
            //修改图标
            this.innerHTML = '<i class="fa fa-play-circle-o fa-4x"></i>';
        }else{
            //播放
            startPlay();
        }
        //播放状态取反
        isplay = !isplay;
    })

    //6.实现歌曲的切换
    //实现播放方式的改变(单曲，列表，随机)
    document.querySelector('.btn-play-type').addEventListener('click',function(e) {
        //改变循环方式
        loopType = ++loopType % 3;
        //根据循环方式切换图标
        var iconHTML = loopType === 0 ? '<i class="fa fa-list fa-1x"></i>' : 
                       loopType === 1 ? '<i class="fa fa-random fa-1x"></i>' :
                                        '<i class="fa fa-repeat fa-1x"></i>';
        this.innerHTML = iconHTML;
    })

    //上一曲/下一曲
    function changeMusic(flag) {
        //切换歌曲前还原上一首歌曲列表项样式
        document.querySelectorAll('.item')[nowIndex].className = 'item row';

        //列表循环
        if(loopType == 0){
            if(flag == 'next'){
                //下一曲的实现
                nowIndex = ++nowIndex % musics.length;
            }else if(flag == 'prev'){
                //上一曲
                nowIndex--;
                //如果当前已经是第一首歌则播放最后一首
                if (nowIndex <= 0) {
                    nowIndex = musics.length - 1;
                }
            }
           
        }else if(loopType === 1){
            //随机循环
            nowIndex = Math.floor(Math.random()*musics.length);

        }else{
            //单曲循环
        }
        //重新设置播放器的播放源
        player.src = baseURL + musics[nowIndex].path;
        startPlay();
    }

    //为上一曲，下一曲按钮绑定事件
    document.querySelector('.btn-play-prev').addEventListener('click',function() {
        changeMusic('prev');
    })
    document.querySelector('.btn-play-next').addEventListener('click',function() {
        changeMusic('next');
    })

    //7.歌曲播放完成时自动切换下一首
    //为播放器对象绑定播放完成事件
    player.addEventListener('ended',function() {
        changeMusic('next');
    })
    //8.静音与取消静音

})()